<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script type="application/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="app9">

    姓:<label><input type="text" v-model="firstName"></label><br><br>
    名:<label><input type="text" v-model="lastName"></label><br><br>
    全名:<span>{{fullName}}</span>

</div>

<script type="application/javascript">
    Vue.config.productionTip = false    // 阻止vue在启动时生成生产提示

    const vm = new Vue({
        el: "#app9",
        // 数据
        data: {
            firstName: "张三",
            lastName: '北京'
        },
        // 方法
        methods: {},
        // 计算属性
        computed: {
            // fullName:{
            //     get(){
            //         console.log('get方法被调用了')
            //         return this.firstName + '-' + this.lastName
            //     }
            // }
            // 简写fullName
            fullName:function () {
                return this.firstName + '-' + this.lastName
            }
        }
    })
</script>
</body>
</html>
